<template>
    <page-container>
        <div class="flex client-wrap left-right-wrap">
            <!-- <project-build @checked="handleTreeCheck"></project-build> -->
            <div class="left-wrap">
                <left-tree pageType="1" :isMedical="false" v-model:checked="queryParams.projectCodes"
                    @checked="handleTreeCheck"></left-tree>
            </div>
            <div class="right-wrap">
                <div class="ant-pro-table">
                    <div class="ant-pro-table-search flex-mode justify-between">
                        <a-form layout="horizontal">
                            <a-row :gutter="16" type="flex" justify="start">
                                <a-col :xs="12" :sm="12" :md="6" :lg="6">
                                    <a-form-item>
                                        <a-input-search v-model:value="queryParams.remarkAndNickname"
                                            placeholder="备注名称/昵称" enter-button @search="handleSearch()" />
                                    </a-form-item>
                                </a-col>
                                <a-col :xs="12" :sm="12" :md="6" :lg="6">
                                    <a-form-item>
                                        <a-input-search v-model:value="queryParams.certifierName" placeholder="认证姓名"
                                            enter-button @search="handleSearch()" />
                                    </a-form-item>
                                </a-col>
                                <a-col :xs="12" :sm="12" :md="6" :lg="6">
                                    <a-form-item>
                                        <a-input-search v-model:value="queryParams.creatorName" placeholder="添加人姓名"
                                            enter-button @search="handleSearch()" />
                                    </a-form-item>
                                </a-col>

                                <a-col :xs="24" :sm="24" :md="12" :lg="4">
                                    <!-- <a-button @click="handleSearch" type="primary">搜索</a-button> -->
                                    <a-button @click="handleReset" class="ml-5px">重置</a-button>
                                </a-col>
                            </a-row>
                        </a-form>
                        <a-space>
                            <a-tooltip title="刷新">
                                <reload-outlined @click="reload" />
                            </a-tooltip>
                            <a-divider type="vertical" />
                            <a-popover placement="bottomRight" arrowPointAtCenter trigger="click"
                                overlayClassName="ant-pro-table-column-setting-overlay">
                                <template #title>
                                    <div class="ant-pro-table-column-setting-title">
                                        <a-checkbox v-model:checked="columnState.checkAll"
                                            :indeterminate="columnState.indeterminate" @change="handleColumnAllClick">
                                            列展示 / 排序
                                        </a-checkbox>
                                        <a @click="reset">重置</a>
                                    </div>
                                </template>
                                <template #content>
                                    <span class="ant-pro-table-column-setting-list">
                                        <drag-container lockAxis="y" dragClass="ant-pro-table-drag-ghost"
                                            dropClass="ant-pro-table-drop-ghost"
                                            @drop="({ removedIndex, addedIndex }) => move(removedIndex, addedIndex)">
                                            <template v-for="column in dynamicColumnItems" :key="column.key">
                                                <draggable>
                                                    <div class="ant-pro-table-column-setting-list-item">
                                                        <drag-icon />
                                                        <a-checkbox :checked="column.checked"
                                                            @change="handleColumnChange($event, column)">
                                                            {{ column.label }}
                                                        </a-checkbox>
                                                    </div>
                                                </draggable>
                                            </template>
                                        </drag-container>
                                    </span>
                                </template>
                                <a-tooltip title="列设置">
                                    <setting-outlined />
                                </a-tooltip>
                            </a-popover>
                        </a-space>
                    </div>

                    <a-card :body-style="{ padding: 0 }" ref="elRef">
                        <a-table sticky :row-class-name="stripe" :size="state.tableSize" :loading="state.loading"
                            :columns="dynamicColumns" :data-source="state.dataSource" :pagination="{
                                showSizeChanger: true,
                                current: state.current,
                                pageSize: state.pageSize,
                                total: state.total,
                                showTotal: total => `共 ${total} 条`,
                            }" ref="tableListWrapRef" :scroll="{ x: 1150, y: tableHeight }"
                            @change="handleTableChange">
                            <template #bodyCell="{ column, record }">
                                <template v-if="column.dataIndex === 'info'">
                                    <a-space align="start">
                                        <a-image :src="record.avatar" :width="30" v-if="record.avatar"></a-image>
                                        <div class="line-1">
                                            <a-tooltip :title="record.name">
                                                {{ record.name }}
                                            </a-tooltip>
                                        </div>
                                    </a-space>
                                </template>

                                <template v-if="column.dataIndex === 'action'">
                                    <a-button type="link" size="small"
                                        v-permission="[`yfwy:financial-bill-account-receivable:query`]"
                                        @click="dialogRef.init(record)">
                                        查看档案
                                    </a-button>
                                </template>
                            </template>
                        </a-table>
                    </a-card>
                </div>

                <dialog-modal ref="dialogRef" />
            </div>
        </div>
    </page-container>
</template>

<script lang="ts" setup>
    import { reactive, ref, watch, watchEffect } from 'vue';
    import { ReloadOutlined, SettingOutlined } from '@ant-design/icons-vue';
    import { Container as DragContainer, Draggable } from '@/components/draggable';
    import { getClientManagementPage } from '@/api/smss/client';
    import type { TableColumn } from '@/typing';
    import { useFetchData } from '@/utils/hooks/useFetchData';
    import { useTableDynamicColumns } from '@/utils/hooks/useTableColumn';
    import DragIcon from '@/components/table/drag-icon.vue';
    import dialogModal from './dialog-modal.vue';
    import useProjectCondition from '../hooks/useProjectCondition';

    const dialogRef = ref();

    const filteredInfoMap = ref();
    const queryParams = reactive<any>({
        projectCodes: [],
    });
    const fetchDataContext = reactive({
        current: 1,
        pageSize: 10,
        tableSize: 'middle', // 'default' | 'middle' | 'small'
        stripe: false,
        executeImmediately: false,
        requestParams: { ...queryParams },
    });
    watch(
        filteredInfoMap,
        () => {
            queryParams.status = filteredInfoMap.value?.status;
            fetchDataContext.requestParams = { ...queryParams };
        },
        { immediate: true },
    );
    const mergedColumns = ref<TableColumn[]>([]);
    watchEffect(() => {
        mergedColumns.value = [
            {
                title: '昵称',
                dataIndex: 'info',
                fixed: 'left',
                width: 100,
            },
            {
                title: '备注名',
                dataIndex: 'remark',
                width: 100,
                fixed: 'left',
            },
            {
                title: '认证姓名',
                dataIndex: 'certifierNames',
                ellipsis: true,
                width: 100,
            },
            {
                title: '关联房产数',
                dataIndex: 'numberOfAssets',
                width: 100,
            },
            {
                title: '关联项目',
                dataIndex: 'projectName',
                ellipsis: true,
                width: 130,
            },            
            {
                title: '关联资产',
                dataIndex: 'propertyRoom',
                ellipsis: true,
                width: 130,
            },
            {
                title: '添加人',
                dataIndex: 'creatorName',
                ellipsis: true,
                width: 100,
            },
            {
                title: '添加人所在部门',
                dataIndex: 'creatorDeptName',
                ellipsis: true,
                width: 100,
            },
            {
                title: '添加时间',
                dataIndex: 'createTime',
                ellipsis: true,
                width: 120,
            },
            {
                title: '操作',
                dataIndex: 'action',
                fixed: 'right',
                width: 80,
            },
        ];
    });
    const needRowIndex = ref(false);
    const {
        state: columnState,
        dynamicColumns,
        dynamicColumnItems,
        handleColumnAllClick,
        handleColumnChange,
        reset,
        move,
    } = useTableDynamicColumns(mergedColumns, { needRowIndex });

    const { stripe, context: state, reload } = useFetchData(getClientManagementPage, fetchDataContext);


    const { tableListWrapRef, tableHeight, handleSearch, handleReset, handleTableChange } = useProjectCondition(queryParams, fetchDataContext);
    const handleTreeCheck = (data: any) => {
        console.log(data);

        queryParams.projectCodes = data;

        handleSearch();
    };
</script>

<style lang="less">
.client-wrap {
    .right-wrap {
        // overflow: hidden;
    }
}
</style>
